<template>
	<view>		
		<scroll-view class="covScroll" scroll-y="true" :scroll-top="scTop" scroll-with-animation="true" :style="{'height':scHeight+'px'}"
		 @tap="allBlur" >
			<text class="showHistory" v-if="isCompleted==0" @tap="getHistory">点击查看更多历史</text>
			<view class="covDtList">
				<block v-for="(item,index) in messageList" :key="index">
					<block v-if="item.type=='TIMTextElem' || item.type=='TIMImageElem'">
						<timeMsg :item="item"></timeMsg>
					</block>
					<block v-if="item.type=='TIMTextElem'">
						<text-msg :item="item" :myInfo="myInfo" :toInfo="toInfo"></text-msg>
					</block>
					<block v-else-if="item.type=='TIMImageElem'">
						<img-msg :item="item" :myInfo="myInfo" :toInfo="toInfo"></img-msg>
					</block>								
				</block>
			</view>
		</scroll-view>
		<view class="fixedBottom">
			<view class="inputGroup">
				<view class="shuruBox">
					<view class="inputText inputMask" v-if="showMask" data-type="inputMask" @tap.stop="showBtmBox" ></view>
					<input class="inputText" confirm-type="send" confirm-hold="true" type="text" @input="onKeyInput" :focus="isFocus"
					 @blur="inputBlur" @focus="inputFocus" v-model="messageContent" data-type="input" @tap.stop="showBtmBox" />
				</view>				
				<image v-if="!showEmoji" src="../../static/cvEmoj.png" data-type="emoji" @tap.stop="showBtmBox"></image>
				<image v-if="showEmoji" src="../../static/input.png" data-type="showinput" @tap.stop="showBtmBox"></image>
				<image v-if="!hasText" src="../../static/cvAdd.png" data-type="more" @tap.stop="showBtmBox"></image>
				<input class="sendBtn" v-if="hasText && (!showEmoji)" data-type="send" @tap="showBtmBox" @focus="sendFocus" disabled  value="发送">
				<text class="sendBtn" v-if="hasText&&showEmoji" data-type="sendEmoji"  @tap="showBtmBox" >发送</text>
			</view>
			<view class="btmZhanwei" :style="{'height':btmHeight+'px'}">
				<view class="inputZhanwei" v-if="showInput"></view>
				<view class="emojiBox">
					<scroll-view class="emojiScroll" scroll-y="true" :style="{'height':showEmoji?(btmHeight+'px'):'0px'}">
						<view class="emojiFlexBox">
							<view class="emojiImgBox" v-for="(eItem,eIndex) in emojiName" :key="eIndex" @tap.stop="chooseEmoji(eItem)">
								<image :src="emojiUrl+emojiMap[eItem]"></image>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="moreBtnBox" :style="{'height':showMore?(btmHeight+'px'):'0px'}">
					<view class="moreBtn" @tap="chooseImg('album')">
						<view class="wtBg">
							<text class="iconfont icon-picfill"></text>
						</view>
						<text class="moreBtnText">图片</text>
					</view>
					<view class="moreBtn" @tap="chooseImg('camera')">
						<view class="wtBg">
							<text class="iconfont icon-camerafill"></text>
						</view>
						<text class="moreBtnText">拍照</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import textMsg from "../../components/msgCard/textMsg.vue";
	import imgMsg from "../../components/msgCard/imgMsg.vue";
	import timeMsg from "../../components/msgCard/timeMsg.vue";
	import {
		emojiMap,
		emojiUrl,
		emojiName
	} from '@/sdk/timWx/emojiMap.js';
	import {mapState} from "vuex";	
	export default {
		components: {						
			timeMsg,
			textMsg,
			imgMsg			
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				timLogin:state=>state.timStore.isLogin,
			})
		},
		data() {
			return {
				messageContent: '',
				hasText: false,
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194), //消息列表高度
				conversationID: '',
				isCompleted: 1,
				nextReqMessageID: '',
				messageList: null,
				userID: '',
				toInfo:{
					nick:'',
					avatar:''
				},
				myInfo:{
					nick:'',
					avatar:''
				},
				scTop: 0, //消息列表滚动距离
				isFocus: false,
				keyBoardHeight: 0, //键盘高度
				emojiName: emojiName,
				emojiMap: emojiMap,
				emojiUrl: emojiUrl,
				showInput: false,
				showEmoji: false,
				showMore: false,
				showMask:true,
				btmHeight: 0 ,//键盘弹出、emoji选择，更多选择 展示时的高度,
			};
		},
		methods: {
			// 监听键盘输入
			onKeyInput: function(event) {
				if (this.messageContent.length > 0) {
					this.hasText = true
				} else {
					this.hasText = false
				}
			},
			// 咨询上报
			postZxun(){
				this.$store.dispatch("apiPostTongji",{
					storeId:this.toInfo.Tag_Profile_Custom_sid?this.toInfo.Tag_Profile_Custom_sid:0,
					type:2,
					userId:this.userInfo.userId
				})
			},
			allBlur() {
				this.showInput = false;
				this.showEmoji = false;
				this.showMore = false;
				this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194);
				this.btmHeight = 0
			},
			sendFocus() {
				setTimeout(() => {
					this.isFocus = true;
				}, 50)
			},
			showBtmBox(e) {
				let _type = e.currentTarget.dataset.type;
				switch (_type) {
					case 'input':
						this.isFocus = true;
						this.showEmoji = false;
						this.showMore = false;
						this.showMask=false;
						this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194);
						this.btmHeight = 0
						break;
					case 'inputMask':
					
						this.isFocus = true;
						this.showMask=false;
						this.showEmoji = false;
						this.showMore = false;
						this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194);
						this.btmHeight = 0
						break;
					case 'showinput':
						this.isFocus = true;
						this.showEmoji = false;
						this.showMore = false;
						this.showMask=false;
						this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194);
						this.btmHeight = 0
						break;
					case 'emoji':
						this.isFocus = false
						this.showEmoji = true;
						this.showInput = false;
						this.showMore = false;
						this.showMask=true;
						if (this.keyBoardHeight == 0) {
							this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194) -
								260;
							this.btmHeight = 260
						} else {
							this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194) -
								this.keyBoardHeight;
							this.btmHeight = this.keyBoardHeight
						}
						this.msgScrollBottom();
						break;
					case 'more':
						this.isFocus = false
						this.showMore = true;
						this.showEmoji = false;
						this.showInput = false;
						this.showMask=true;
						if (this.keyBoardHeight == 0) {
							this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194) -
								260;
							this.btmHeight = 260
						} else {
							this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194) -
								this.keyBoardHeight;
							this.btmHeight = this.keyBoardHeight
						}
						this.msgScrollBottom();
						break;

					case 'send':
						this.showMask=true;
						this.showMore = false;
						this.showEmoji = false;
						this.showInput = true;
						this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194);
						this.btmHeight = 0
						if (!this.messageContent) {
							uni.showToast({
								title: '请输入内容',
								icon: 'none'
							});
						} else {
							this.$store.dispatch("timSendText",{
								to:this.toInfo.userID,
								payload:{
									text:this.messageContent
								}
							}).then(res=>{
								let arr = [];
								arr.push(res.data.message)
								this.messageList = this.messageList.concat(arr)
								this.msgScrollBottom()
								this.messageContent = '';
							})
						}
						break;
					case 'sendEmoji':
						this.$store.dispatch("timSendText",{
							to:this.toInfo.userID,
							payload:{
								text:this.messageContent
							}
						}).then(res=>{
							let arr = [];
							arr.push(res.data.message)
							this.messageList = this.messageList.concat(arr)
							this.msgScrollBottom()
							this.messageContent = '';
						})
					default:
						break;
				}
			},
			getImgWidth(e) {
				console.log(e);
			},
			inputFocus() {
				// this.isFocus = true;
			},
			// 文本框失去焦点
			inputBlur() {
				this.isFocus = false;
			},

			// 点击EmojiBox中的表情
			chooseEmoji(item) {
				this.messageContent += item
			},
			// 消息列表滚动到最低部
			msgScrollBottom() {
				setTimeout(() => {
					this.scTop = this.scTop == 0 ? 99999 : (this.scTop + 1)
				}, 500)
			},
			showKbd() {
				this.showEmoji = false;
				this.showMore = false;
				this.showInput = true;
				this.scHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(194);
				this.btmHeight = 0;
			},
			
			// 获取历史记录
			getHistory() {
				if (this.isCompleted == 0) {
					this.$store.dispatch("timGetMsgList",{
						conversationID: this.conversationID,
						nextReqMessageID: this.nextReqMessageID,
						count: 10
					}).then(res=>{
						this.isCompleted = res.data.isCompleted;
						this.nextReqMessageID = res.data.nextReqMessageID
						this.messageList = res.data.messageList.concat(this.messageList)
					})
				}
			},
			// 选择图片
			chooseImg(str) {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: [str],		//album  camera
					success: (res) => {
						if (res.tempFiles.length > 0) {
							uni.showLoading({
								title: '图片上传中',
								mask: false
							});
							_this.$store.dispatch("timSendImg",{
								to:_this.toInfo.userID,								
								payload:{
									file:res
								}
							}).then(sendRes=>{
								let arr = [];
								arr.push(sendRes.data.message)
								_this.messageList = _this.messageList.concat(arr)
								_this.msgScrollBottom();
								uni.hideLoading();
							})
						}
					}
				})
			},
			getUserInfo(){
				this.$store.dispatch("timGetUserInfo",[this.userID])
				.then(res=>{
					console.log("目标资料：");
					console.log(res);
					if(res.data.length>0){
						this.toInfo=res.data[0]
						this.toInfo.avatar=this.toInfo.avatar;
						this.toInfo.nick=this.toInfo.nick;
						console.log(this.toInfo.nick)
						uni.setNavigationBarTitle({
							title: this.toInfo.nick
						})
						if(this.toInfo.profileCustomField && this.toInfo.profileCustomField.length>0){
							this.toInfo.profileCustomField.forEach(x=>{
								this.toInfo[x.key]=x.value
							})
						}
					}else{
						uni.showToast({
							title: '该商户暂未登录TIM',
							icon: 'none'
						});
					}
					
					
				})
				this.$store.dispatch("timGetMyInfo").then(res=>{
					// console.log("当前资料：");
					console.log(res.data);
					this.myInfo=res.data;
					// this.myInfo.avatar=this.myInfo.avatar?this.myInfo.avatar:this.userInfo.avatarUrl;
					this.myInfo.avatar=this.userInfo.avatarUrl;
					console.log(this.myInfo.avatar)
				})
			},
			getData(){
				this.$store.dispatch("timGetMsgList",{
					conversationID: this.conversationID,
					count: 10
				}).then(res=>{
					console.log(res)
					this.isCompleted = res.data.isCompleted;
					this.nextReqMessageID = res.data.nextReqMessageID
					this.messageList = res.data.messageList
					this.msgScrollBottom();
				})
			}
			
		},
		watch: {
			messageContent(newContent) {
				this.onKeyInput()
			}

		},		
		onLoad(cfm) {
			this.conversationID = cfm.cvid
			this.userID = cfm.toImId;
			this.getUserInfo();
			this.getData();
			
			setTimeout(()=>{
				// this.postatic/userPicstZxun()
			},2000)
			
			
			uni.onKeyboardHeightChange(res => {
				if (res.height != 0) {
					this.keyBoardHeight = res.height
				}
			})
			uni.$on("timReceivedChange", res => {
				if (res.data[0].conversationID == this.conversationID) {
					this.messageList = this.messageList.concat(res.data)
					this.msgScrollBottom()
				}
			})
		}

	}
</script>

<style lang="less">
	.showHistory {
		display: inline-block;
		color: #0077AA;
		font-size: 24upx;
		width: 100%;
		text-align: center;
	}

	.covScroll {
		background-color: #f6f6f6;
	}

	.covDtList {

		padding: 20upx 32upx;
		box-sizing: border-box;

		.msgRow {
			display: flex;
			align-items: flex-start;
			padding-right: 118upx;
			margin-bottom: 20upx;

			.userAvatar {
				width: 86upx;
				height: 86upx;
				border-radius: 50%;
				margin-right: 32upx;
				flex-shrink: 0;
			}

			.msgBox {
				background-color: #FFFFFF;
				border-radius: 10upx;
				position: relative;
				padding: 20upx 20upx;
				display: flex;
				align-items: center;
				min-height: 86upx;

				.jiantou {
					width: 20upx;
					height: 20upx;
					background-color: #FFFFFF;
					border-radius: 4upx;
					position: absolute;
					top: 43upx;
					left: -10upx;
					transform: translateY(-50%) rotate(45deg);
				}

				.msgCnt {
					font-size: 28upx;
					display: flex;
					align-items: center;

					.emoji {
						width: 36upx;
						height: 36upx;
					}
				}
			}

			.imgMsg {
				flex-grow: 0;
				overflow: hidden;
				padding: 0;
			}
		}

		.out {
			padding-left: 118upx;
			padding-right: 0;
			justify-content: flex-end;

			.userAvatar {
				order: 2;
				margin-right: 0;
				margin-left: 32upx;
			}

			.msgBox {
				order: 1;

				.jiantou {
					right: -10upx;
					left: auto;
				}
			}
		}
	
	}

	.fixedBottom {
		position: fixed;
		z-index: 99;
		width: 100%;
		bottom: 0;
		left: 0;
		min-height: 104upx;
		background-color: #FFFFFF;


	}

	
	.inputGroup {
		position: relative;
		height: 104upx;
		display: flex;
		align-items: center;
		padding: 0 38upx 0 16upx;
		.shuruBox{
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			position: relative;
		}
		.inputText {
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 52upx;
			flex-grow: 1;
			flex-shrink: 1;
			padding: 0 20upx;
			line-height: 60upx;
			
			border: 22upx solid #FFFFFF;
			font-size: 30upx;
		}
		
		.inputMask{
			position: absolute;
			// box-sizing: content-box;
			z-index: 9;
			background-color: rgba(0,0,0,0);
			border: 22upx solid rgba(0,0,0,0);
			width: 100%;
			height: 104upx;
		}

		image {
			width: 56upx;
			height: 56upx;
			margin-left: 32upx;
			flex-shrink: 0;
		}

		image:first-of-type {
			margin-left: 10upx;
		}

		.sendBtn {
			width: 90upx;
			height: 60upx;
			border: none;
			font-size: 32upx;
			line-height: 60upx;
			text-align: center;
			border-radius: 10upx;
			background-color: #fbc521;
			color: #FFFFFF;
			margin-left: 30upx;
			padding: 0 15upx;
		}

		.sendBtn:after {
			border: none;

		}
	}

	.orderMsg {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		align-items: flex-start !important;

		.orderTishi {
			font-size: 24rpx;
			color: #8e8e8e;
			margin-bottom: 20upx;
		}

		.goodBox {
			display: flex;
			background-color: #f6f6f6;
			border-radius: 10upx;
			width: 100%;
			image {
				width: 146upx;
				height: 146upx;
				border-radius: 10upx;
				flex-shrink: 0;
				margin-right: 18upx;
			}

			.goodInfo {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				padding: 5upx 5upx 5upx 0;

				.goodTitle {
					font-size: 32rpx;
					color: #222433;
				}

				.paymentInfo {
					display: flex;

					.paymentTishi {
						font-size: 24upx;
					}

					.paymentCount {
						font-size: 30rpx;
						color: #ed2e2e;
					}
				}
			}
		}

		.orderOp {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-top: 18upx;

			button {
				margin: 0;
				height: 62upx;
				border-radius: 31upx;
				border: none;
				background: linear-gradient(to right, #ff6829, #ff2f36);
				color: #FFFFFF;
				padding: 0 50upx;
				line-height: 62upx;
				font-size: 28upx;
				font-weight: bold;
			}

			button:after {
				border: none;
			}
		}
	}

	.emojiScroll {
		background-color: #f6f6f6;

		// transition: all 0.3s; 
		.emojiFlexBox {
			display: flex;
			flex-wrap: wrap;
			padding: 20upx 15upx;

		}

		.emojiImgBox {
			width: 80upx;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 60upx;
				height: 60upx;
			}
		}

	}

	.inputZhanwei {
		background-color: #FFFFFF;
	}

	.moreBtnBox {
		overflow: hidden;
		background-color: #f6f6f6;
		padding: 30upx;
		display: flex;

		.moreBtn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 30upx;

			.wtBg {
				width: 150upx;
				height: 150upx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 16upx;

				.iconfont {
					font-size: 80upx;
					color: #c6c6c6;
				}
			}

			>text {
				font-size: 28upx;
				color: #222222;
				margin-top: 16upx;
			}
		}
	}
</style>
